<template>
	<div>
		<div>
			<DataPicker
				ref="DataPicker"
				v-model="value"
				@sure="sure"
				@open="select1"
				@next="next"
				:labelOverflow="labelOverflow"
				:isMaskClick="false"
				:format="format"
				placeholder="品牌/车系/车型"
				:dict="{ list: list, label: 'name', value: 'id' }"></DataPicker>
		</div>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import DataPicker from '@/pages/quota/AForm/dataPicker/index.vue';
	export default {
		name: '',
		components: { DataPicker },
		props: {
			labelOverflow: {
				type: Boolean,
			},
		},
		data() {
			return {
				value: [],
				list: [
					{
						label: '品牌',
						loading: true,
						children: [],
					},
					{
						label: '车系',
						loading: true,
						children: [],
					},
					{
						label: '车型',
						loading: true,
						children: [],
					},
				],
			};
		},
		computed: {},
		created() {},
		mounted() {},
		methods: {
			format(labels) {
				return labels.at(-1);
			},
			sure(value) {
				this.$emit('input', value.value);
				this.$emit('sure', value);
			},
			next({ value, step }) {
				switch (step) {
					case 1:
						this.select2(value?.[0]);
						break;
					case 2:
						this.select3(value?.[1]);
						break;
				}
			},
			select1() {
				this.list[0].loading = true;
				app.getBrandName([])
					.then(res => {
						this.list[0].children = res;
					})
					.finally(() => {
						this.list[0].loading = false;
					});
			},
			select2(id) {
				this.list[1].loading = true;
				app.getSeriesName([id])
					.then(res => {
						this.list[1].children = res;
					})
					.finally(() => {
						this.list[1].loading = false;
					});
			},
			select3(id) {
				this.list[2].loading = true;
				app.getModelName([id])
					.then(res => {
						this.list[2].children = res;
					})
					.finally(() => {
						this.list[2].loading = false;
					});
			},
			reset() {
				this.$refs.DataPicker.reset();
			},
		},
	};
</script>

<style lang="scss" scoped></style>
